import { action9 } from '@/pages/home/createAction';
import store from '@/pages/home/store';
import {
  Button,
  Col,
  DatePicker,
  Form,
  Input,
  List,
  Row,
  Select,
  Steps
} from 'antd';
import React, { useState } from 'react';
import http from '@/services/request';
import { openNotification } from '@/components/Pop';
const { Step } = Steps;
const { Option } = Select;
const { Search } = Input;
export const STEPS = (props: { current: number }) => (
  <Steps current={props.current}>
    <Step title={<b>新增入库批次编号</b>} description="新增一个入库批次" />
    <Step
      title={<b>饲料入库</b>}
      description="选择一个入库批次编号进行入库操作"
    />
    <Step title={<b>饲料入库记录</b>} description="选择查找入库记录" />
  </Steps>
);
//form-新增订单编号
export const NewForm = (props: any) => {
  return (
    <List
      style={{ margin: '0 auto' }}
    >
      <Form ref={props.InNumberref}>
        <Row>
          <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 3 }}>
            <Form.Item
              label="请输入入库单号"
              name="inNumber"
              rules={[{ required: true, message: '请输入入库单号' }]}
            >
              <Input></Input>
            </Form.Item>
            <Form.Item
              label="请输入入库时间"
              name="inDate"
            >
              <DatePicker />
            </Form.Item>
            <Form.Item
              label="请输入供应单位"
              name="supplierName"
              rules={[{ required: true, message: '请输入供应单位' }]}
            >
              <Input></Input>
            </Form.Item>
            <Form.Item
              label="请输入供应编号"
              name="supplierNumber"
              rules={[{ required: true, message: '请输入供应编号' }]}
            >
              <Input></Input>
            </Form.Item>
            <Form.Item
              label="批次编号"
              name="batch"
              rules={[{ required: true, message: '请输入批次编号' }]}
            >
              <Input></Input>
            </Form.Item>
          </Col>
          <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 3 }}>
            <Form.Item
              name="receiverId"
              label="仓库接收人id"
              rules={[{ required: true, message: '请输入仓库接收人id' }]}
            >
              <Input></Input>
            </Form.Item>
            <Form.Item
              label="仓库接收人姓名"
              name="receiverName"
              rules={[{ required: true, message: '请输入仓库接收人姓名' }]}
            >
              <Input></Input>
            </Form.Item>
            <Form.Item
              name="receiverPhone"
              label="请输入联系方式"
              rules={[{ required: true, message: '请输入联系方式' }]}
            >
              <Input></Input>
            </Form.Item>
            <Form.Item
              label="请输入备注"
              name="remark"
              rules={[{ required: true, message: '请输入备注' }]}
            >
              <Input></Input>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </List>
  );
};
//form-新增饲料入库
export const FeedForm = (props: any) => {
  return (
    <List
      style={{ margin: '0 auto' }}
    >
      <Form ref={props.Instoreref}>
        <Row>
          <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 3 }}>
            <Form.Item
              label="请输入入库单号"
              name="inNumber"
              rules={[{ required: true, message: '请输入入库单号' }]}
            >
              <Input></Input>
            </Form.Item>
            <Form.Item
              label="请输入饲料名称"
              name="feedName"
              rules={[{ required: true, message: '请输入饲料名称' }]}
            >
              <Input></Input>
            </Form.Item>
            <Form.Item
              label="饲料编号"
              name="feedNumber"
              rules={[{ required: true, message: '请输入饲料编号' }]}
            >
              <Select
                onSelect={(value: number) => {
                  getQuantity(props.Instoreref, value);
                }}
              >
                {props.feedOptions.map((i: number) => (
                  <Option value={i} key={i} children={null}></Option>
                ))}
              </Select>
            </Form.Item>

            <Form.Item name="getdata" label="该饲料库存数量">
              <Input disabled></Input>
            </Form.Item>
          </Col>
          <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 3 }}>
            <Form.Item
              label="请输入单价"
              name="price"
              rules={[{ required: true, message: '请输入单价' }]}
            >
              <Input></Input>
            </Form.Item>
            <Form.Item
              label="请输入规格"
              name="specification"
              rules={[{ required: true, message: '请输入规格' }]}
            >
              <Input></Input>
            </Form.Item>
            <Form.Item
              label="请输入备注"
              name="remark"
              rules={[{ required: true, message: '请输入备注' }]}
            >
              <Input></Input>
            </Form.Item>
            <Form.Item
              name="quantity"
              label="请输入数量"
              rules={[{ required: true, message: '请输入数量' }]}
            >
              <Input></Input>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </List>
  );
};
//form-订单编号list
export const ListForm = (props: any) => {
  return (
    <Form
      ref={props.listref}
      layout={'vertical'}
      style={{
        minHeight: '100%',
        flex: 1,
        overflow: 'auto',
        width: '100%',
        overflowX: 'hidden'
      }}
    >
      <Row>
        <Col xs={{ span: 5, offset: 4 }} lg={{ span: 6, offset: 4 }}>
          <Form.Item
            label="入库单号"
            name="inNumber"
            rules={[{ required: true, message: '请输入入库单号' }]}
          >
            <Input></Input>
          </Form.Item>
          <Form.Item
            label="入库时间"
            name="inDate"
            rules={[{ required: true, message: '请输入入库时间' }]}
          >
            <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
          </Form.Item>
          <Form.Item
            label="供应单位"
            name="supplierName"
            rules={[{ required: true, message: '请输入供应单位' }]}
          >
            <Input></Input>
          </Form.Item>
          <Form.Item
            label="供应编号"
            name="supplierNumber"
            rules={[{ required: true, message: '请输入供应编号' }]}
          >
            <Input></Input>
          </Form.Item>
          <Form.Item
            label="批次编号"
            name="batch"
            rules={[{ required: true, message: '请输入批次编号' }]}
          >
            <Input></Input>
          </Form.Item>
        </Col>
        <Col xs={{ span: 5, offset: 4 }} lg={{ span: 6, offset: 4 }}>
          <Form.Item
            name="receiverId"
            label="仓库接收人id"
            rules={[{ required: true, message: '请输入仓库接收人id' }]}
          >
            <Input></Input>
          </Form.Item>
          <Form.Item
            label="接收人姓名"
            name="receiverName"
            rules={[{ required: true, message: '仓库接收人姓名' }]}
          >
            <Input></Input>
          </Form.Item>
          <Form.Item
            name="receiverPhone"
            label="联系方式"
            rules={[{ required: true, message: '请输入联系方式' }]}
          >
            <Input></Input>
          </Form.Item>
          <Form.Item
            label="备注"
            name="remark"
            rules={[{ required: true, message: '请输入备注' }]}
          >
            <Input></Input>
          </Form.Item>
        </Col>
      </Row>
    </Form>
  );
};
//http请求入库编号
const postInNumber = (data: any) => {
  const postfeedNumber = data.current.getFieldsValue();
  const {
    inNumber,
    inDate,
    supplierName,
    supplierNumber,
    batch,
    receiverId,
    receiverName,
    receiverPhone,
    remark
  } = postfeedNumber;
  http
    .post(`/goods/chicken/feedInFarming/save`, {
      inNumber: Number(inNumber),
      inDate: inDate?._d,
      supplierName,
      supplierNumber,
      batch,
      receiverId,
      receiverName,
      receiverPhone,
      remark
    })
    .then(() => {
      //气泡提示框
      //如果没有定时器-异步，就表示为请求未完成时就调用//报错告诉我们无法对已卸载的组件执行状态更新，它表示应用程序中存在内存泄漏。
      setTimeout(() => {
        data.current.setFieldsValue({
          inNumber: '',
          inDate: '',
          supplierName: '',
          supplierNumber: '',
          batch: '',
          receiverId: '',
          receiverName: '',
          receiverPhone: '',
          remark: ''
        });
        openNotification('top', '新增入库单号成功！');
      }, 0);
    })
    .catch(() => {
      return setTimeout(() => {
        openNotification('top', '新增入库单号成功！');
      }, 0);
    });
};
//http请求饲料入库
const postfeed = (data: any) => {
  const postdata = data.current.getFieldsValue();
  const {
    feedName,
    feedNumber,
    inNumber,
    price,
    quantity,
    remark,
    specification
  } = postdata;

  http
    .post(`/goods/chicken/feedInDetailFarming/save`, {
      feedName,
      feedNumber: Number(feedNumber),
      inNumber: Number(inNumber),
      price: Number(price),
      quantity: Number(quantity),
      remark,
      specification
    })
    .then((res) => {
      data.current.setFieldsValue({
        feedName: '',
        feedNumber: '',
        inNumber: '',
        price: '',
        quantity: '',
        remark: '',
        specification: ''
      });
      //气泡提示框
      openNotification('top', '新增饲料入库成功！');
    })
    .catch(() => {
      return setTimeout(() => {
        openNotification('bottom', '新增失败！');
      }, 0);
    });
};
// 按照入库单号搜索
export const SearchSelector = (props: any) => {
  const [searchid, setsearchid]: any = useState('materialName');
  return (
    <div
      style={{
        display: 'inline-block',
        width: '380px',
        marginBottom: 10,
        marginRight: 10
      }}
    >
      <Select
        defaultValue={Options[0].label}
        style={{ width: 100 }}
        defaultActiveFirstOption
        onSelect={(value: string, option: any) => {
          setsearchid(option.key);
        }}
      >
        {Options.map((i) => (
          <Option value={i.label} key={i.value} children={null}></Option>
        ))}
      </Select>
      <Search
        placeholder="请输入您要查的入库单号"
        onSearch={(e: string) => {
          // 清空输入框之后，再次搜索，出现的是初始化时候的数据
          if (e === '') {
            http
              .get('/server/adoptionSlaughter/list/1/10')
              .then((res: { data: { records: any } }) => {
                props.dataSource(res.data.records);
              });
            return;
          }
          switch (searchid) {
            case 'materialName': {
              http(`/server/adoptionSlaughter/fuzzyGetMaterialName/${e}`).then(
                (res: { data: any }) => {
                  props.dataSource(res.data);
                }
              );
              break;
            }
            default: {
              break;
            }
          }
        }}
        style={{ width: '280px' }}
        enterButton
      />
    </div>
  );
};
const Options = [
  { label: '入库单号', value: 'inNumber', onClick: (e: any) => {} }
];

//获取库存数量
const getQuantity = (
  ref: { current: { setFieldsValue: (arg0: any) => void } },
  FeedNumber: number
) => {
  http
    .get(`/goods/chicken/feedInfoFarming/getInventory/${FeedNumber}`)
    .then((res) => {
      ref.current.setFieldsValue({
        ...ref,
        getdata: res.data
      });
    });
};
//按钮组
export const Buttongroup = (props: any) => {
  return (
    <div style={{ marginBottom: 10, float: 'left' }}>
      <Button
        style={{
          backgroundColor: '#08c29e',
          color: 'whitesmoke',
          marginRight: 10
        }}
        //如果要封装还要再把函数传进去，实际没什么优化
        onClick={() => {
          //调整步骤条的位置
          props.setCurrent(0);
          store.dispatch(action9('新增订单编号'));
          props.setStep(store.getState().current);
          //只有处在这个步骤然后再按一次才能新增
          props.switchstep === '新增订单编号'
            ? props.setCurrent(postInNumber(props.InNumberref))
            : '';
        }}
      >
        新增订单编号
      </Button>
      <Button
        type="primary"
        onClick={() => {
          props.setCurrent(1);
          store.dispatch(action9('新增饲料入库'));
          //获取库存数量

          props.setStep(store.getState().current);
          props.switchstep === '新增饲料入库' ? postfeed(props.Instoreref) : '';
        }}
        style={{ marginRight: 10 }}
      >
        新增饲料入库
      </Button>
      <Button
        style={{
          backgroundColor: 'red',
          color: 'whitesmoke',
          marginRight: 10
        }}
        onClick={() => {
          props.setCurrent(2);
          store.dispatch(action9('新增入库记录'));
          props.setStep(store.getState().current);
          props.switchstep === '新增入库记录' ? '' : '';
        }}
      >
        查看入库记录
      </Button>
    </div>
  );
};

//复选框的接口
export interface DataType {
  key: React.Key;
  id: string;
  name: string;
  age: number;
  address: string;
}
